Every demo below works. Nothing is loaded from the internet. Press ? for the shortcuts, / to jump to the search box.
One panel visible at a time. Click a tab, or focus one and use the arrow keys.
Built on the native <details> element. The browser handles opening and closing.
Drag the divider to resize. Double-click it to go back to an even split.
Press any key to see it captured. / focuses search, ? opens the shortcut sheet, Esc closes things.
A dialog takes over the page; a drawer slides in beside it. Both close on Esc or a click outside.
A tooltip appears on hover and explains. A popover needs a click and stays until dismissed.
Gross margin was 38.2% this quarter.
Drag a row to reorder the list. The blue edge shows where it will land.
Type to filter as you go. Click a column heading to sort, click again to reverse it.
| City | Region | Units | Revenue |
|---|
Click a value to edit it where it sits. Enter saves, Esc cancels, clicking away saves.
Feedback as you type, a strength meter, and a submit button that stays off until the form is valid.
| / | Focus the search box |
| ? | Open and close this sheet |
| Esc | Close the sheet, the modal or the drawer |
| ← → | Move between tabs, when a tab has focus |
Press Esc or click outside to close.